<template>
  <view class="wanlshop-container">
    <!-- height: headHeight + 'px', -->
    <view
      v-if="common.modulesData.homeModules.page"
      class="wanlshop-container__head"
      :style="{
        height: headHeight + 'px',
        color: common.modulesData.homeModules.page
          ? common.modulesData.homeModules.page.style.navigationBarTextStyle ==
            '#ffffff'
            ? '#ffffff'
            : '#333333'
          : '',
        backgroundColor: common.modulesData.homeModules.page
          ? common.modulesData.homeModules.page.style
              .navigationBarBackgroundColor
          : '#f7f7f7',
        backgroundImage:
          'url(' +
          $wanlshop.oss(
            common.modulesData.homeModules.page
              ? common.modulesData.homeModules.page.style
                  .navigationBackgroundImage
              : '',
            0,
            50,
            1,
            'transparent',
            'png'
          ) +
          ')',
      }"
    >
      <!-- height: headHeight -->
      <view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
        <view class="navigater flex align-center justify-between">
          <view class="flex" @tap="scanCode">
            <view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
          </view>
          <view class="search flex align-center margin-lr-sm round">
            <view class="icon text-df text-bold wanl-gray-dark">
              <text class="wlIcon-sousuo1"></text>
            </view>
            <swiper vertical autoplay circular interval="3000">
              <swiper-item @tap="handleSearch('')">
                <text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
              </swiper-item>
              <swiper-item
                v-for="(item, index) in common.modulesData.searchModules"
                :key="item.keywords"
                @tap="handleSearch(item.keywords)"
              >
                <text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
              </swiper-item>
            </swiper>
          </view>
          <!-- <view class="flex"> -->
          <!-- <view class="margin-right-bj text-xxl position-relative" @tap="$wanlshop.to('/pages/user/coupon/list')">
							<text class="wlIcon-coupon"/>
							<view class="cu-tag badge">减</view>
						</view> -->
          <!-- 分享 -->
          <!-- <view class="margin-right-bj text-xxl position-relative" @tap="handleModal('share')">
							<text class="wlIcon-fenxiangcopy"/>
						</view> -->
          <!-- 消息 -->
          <!-- <view class="text-xxl" @tap="$wanlshop.to('/pages/notice/notice')">
							<text class="wlIcon-xiaoxizhongxin"></text>
						</view> -->
          <!-- </view> -->
        </view>
        <!-- <view class="toolbar flex padding-lr-bj align-center">
					<scroll-view
						class="scroll"
						scroll-x
						scroll-with-animation
						:scroll-left="scrollLeft"
					>
						<view class="scroll__item" :class="{ action: currentItemId === 'follow' }" @tap="handleSelect('follow', 0)" >
							关注
						</view>
						<view class="scroll__item" :class="{ action: currentItemId === 'home' }" @tap="handleSelect('home', 1)" >
							推荐
						</view>
						<view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules" :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }" @tap="handleSelect('cid' + item.id, index + 2)" >
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="category flex align-center" @tap="handleModal('category')">
						<text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
						<text v-else class="wlIcon-fanhui4"></text>
					</view>
				</view> -->
      </view>
    </view>
    <!-- 主体 -->
    <swiper
      class="wanlshop-container__main"
      :current-item-id="currentItemId"
      :style="{
        height: windowHeight + 'px',
      }"
      @change="changeCurrent"
      @animationfinish="animationFinish"
    >
      <!-- 发现页 -->
      <swiper-item item-id="follow">
        <wanl-shop-find
          :windowHeight="windowHeight"
          :headHeight="headHeight"
          :currentItemId="currentItemId"
          :homeModules="common.modulesData.homeModules"
          :appConfig="common.appConfig"
          :user="user"
        />
      </swiper-item>
      <!-- 主页 -->
      <swiper-item item-id="home">
        <!-- headHeight 71 background-position: 0 -10px; -->
        <wanl-shop-page
          :windowHeight="windowHeight"
          :headHeight="headHeight"
          :headTop="headTop"
          :pageModules="common.modulesData.homeModules"
          :adData="common.adData"
        />
      </swiper-item>
      <!-- 分类 -->
      <swiper-item
        v-for="(item, index) in common.modulesData.categoryModules"
        :key="item.id"
        :item-id="'cid' + item.id"
      >
        <wanl-shop-category
          :cid="item.id"
          :headHeight="headHeight"
          :windowHeight="windowHeight"
          :currentItemId="currentItemId"
          :homeModules="common.modulesData.homeModules"
          :childlist="item.childlist"
        />
      </swiper-item>
    </swiper>
    <!-- 弹窗 -->
    <view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
      <!-- 顶部 -->
      <view
        class="cu-modal top-modal"
        :class="modalName == 'category' ? 'show' : ''"
        @tap="handleModal()"
      >
        <view
          class="cu-dialog padding-lr-bj padding-bottom-bj"
          :style="{ paddingTop: headHeight + 12 + 'px' }"
          @tap.stop=""
        >
          <view class="category text-min">
            <view
              class="item round bg-gray"
              :class="{ action: currentItemId === 'follow' }"
              @tap="handleSelect('follow', 0)"
            >
              我的关注
            </view>
            <view
              class="item round bg-gray"
              :class="{ action: currentItemId === 'home' }"
              @tap="handleSelect('home', 1)"
            >
              主页
            </view>
            <view
              class="item round bg-gray"
              v-for="(item, index) in common.modulesData.categoryModules"
              :key="item.id"
              :class="{ action: currentItemId === 'cid' + item.id }"
              @tap="handleSelect('cid' + item.id, index + 2)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>

      <!-- 分享 -->
      <!-- <view
				class="cu-modal wanl-share bottom-modal"
				:class="modalName == 'share' ? 'show' : ''"
				@tap="handleModal()"
			>
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						ref="wanlShare"
						page="pages/index"
						:scene="{qr:'i'}"
						:scrollAnimation="scrollAnimation" 
						@change="handleModal"
					/>
				</view>
			</view> -->

      <!-- 版本更新 -->
      <view class="cu-modal" :class="{ show: update.update }">
        <view class="cu-dialog">
          <view class="hade">
            <image
              :src="$wanlshop.appstc('/common/update.png')"
              mode="aspectFit"
            ></image>
            <view class="title">
              <view class="text-white text-bold5">{{ update.data.title }}</view>
              <text class="text-white text-bold5">
                最新版本：{{ update.data.versionName }}
              </text>
            </view>
          </view>

          <view class="info">
            <view class="text-lg text-bold5"><text>更新内容：</text></view>
            <rich-text class="wanl-gray-dark" :nodes="update.data.content" />
            <!-- 开始下载 -->
            <view class="margin-top-xl" v-if="update.download.start">
              <view class="flex margin-bottom-sm">
                <view class="cu-progress round striped active">
                  <view
                    class="bg-orange"
                    :style="{ width: update.download.progress + '%' }"
                  ></view>
                </view>
                <text class="margin-left-sm"
                  >{{ update.download.progress }}%</text
                >
              </view>
              <view class="wanl-gray-dark text-sm text-center">
                <text>
                  下载中，请稍等（{{
                    $wanlshop.conver(update.download.totalBytesWritten)
                  }}/{{
                    $wanlshop.conver(update.download.totalBytesExpectedToWrite)
                  }}）
                </text>
              </view>
            </view>
            <!-- 开始安装 -->
            <view
              class="margin-top-xl text-center"
              v-else-if="update.download.install"
            >
              安装中...
            </view>
            <!-- 更新提示 -->
            <view class="flex justify-around margin-top-xl" v-else>
              <button class="cu-btn radius-bock bg-gray lg" @tap="ignore">
                忽略升级
              </button>
              <button class="cu-btn radius-bock bg-blue lg" @tap="download">
                立刻升级
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import wanlShopPage from "@/components/wanl-shop/page";
import wanlShopFind from "@/components/wanl-shop/find";
import wanlShopCategory from "@/components/wanl-shop/category";

export default {
  components: {
    wanlShopPage,
    wanlShopFind,
    wanlShopCategory,
  },
  computed: {
    ...mapState(["common", "user", "update"]),
  },
  data() {
    return {
      modalName: "",
      scrollAnimation: 300,
      headHeight: 75,
      windowHeight: 0,
      headTop: 0,
      currentItemId: "home",
      currentData: {},
      scrollLeft: 0,
      contentText: {
        contentdown: "下拉加载更多",
        contentrefresh: "加载中",
        contentnomore: "我是有底线的",
      },
    };
  },
  onShow() {
    // #ifdef APP-PLUS
    plus.navigator.setFullscreen(false);
    // #endif
    // 计算页面尺寸
    let sys = this.$wanlshop.wanlsys();
    this.headTop = sys.top;
    this.headHeight = sys.height + uni.upx2px(60);
    this.windowHeight = sys.windowHeight;
    setTimeout(() => {
      uni.setNavigationBarColor({
        frontColor: this.$store.state.common.modulesData.homeModules.page
          ? this.$store.state.common.modulesData.homeModules.page.style
              .navigationBarTextStyle
          : "",
        backgroundColor: this.$store.state.common.modulesData.homeModules.page
          ? this.$store.state.common.modulesData.homeModules.page.style
              .navigationBarBackgroundColor
          : "",
      });
    }, 200);
  },
  onReady() {
    // 判断网络类型
    uni.getNetworkType({
      success: (res) => {
        if (
          res.networkType == "2g" ||
          res.networkType == "3g" ||
          res.networkType == "4g"
        ) {
          this.$wanlshop.msg("当前使用非WIFI环境，请注意流量使用");
        } else if (res.networkType == "none") {
          this.$wanlshop.msg("没有网络");
        }
      },
    });
  },
  onLoad(query) {
    // 判断是否小程序来源
    if (query.hasOwnProperty("scene")) {
      let scene = decodeURIComponent(query.scene);
      scene = this.$wanlshop.getParam(scene);
      console.log("微信小程序：", scene);
    }
  },
  methods: {
    ...mapActions({
      download: "update/download", // 立即下载
      ignore: "update/ignore", // 忽略更新
    }),
    // 选择Tag
    handleSelect(id, index) {
      this.currentItemId = id;
      this.scrollLeft = (index - 1) * 50;
    },
    // 动画
    animationFinish(e) {
      //#ifdef APP-PLUS
      this.changeCurrent(e);
      //#endif
    },
    // 滚动的tag
    changeCurrent(e) {
      this.currentItemId = e.detail.currentItemId;
      this.scrollLeft = (e.detail.current - 1) * 50;
    },
    // 弹出层
    handleModal(name) {
      // 滚动分享
      // if (name == 'share') {
      // 	setTimeout(() => {
      // 		this.scrollAnimation = 0;
      // 	}, 300);
      // }
      // // 强制关闭海报
      // if(this.modalName == 'share'){
      // 	this.$refs.wanlShare.closePoster();
      // }
      this.modalName = this.modalName ? null : name;
    },
    // 扫码
    scanCode() {
      // #ifndef H5
      uni.scanCode({
        success: (res) => {
          let query = this.$wanlshop.getParam(res.result),
            id = query.id;
          switch (query.qr) {
            case "g":
              this.onGoods(id);
              break;
            case "gr":
              this.$wanlshop.to(
                `/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`
              );
              break;
            case "u":
              this.$wanlshop.to(`/pages/user/info?id=${id}`);
              break;
            case "fu":
              this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
              break;
            case "c":
              this.$wanlshop.on("/pages/category");
              break;
            case "p":
              this.$wanlshop.to(`/pages/page/index?id=${id}`);
              break;
            case "s":
              this.onShop(id);
              break;
            case "live":
              // #ifdef APP-PLUS || MP-WEIXIN
              this.$wanlshop.auth(`/pages/shop/live/live`);
              // #endif
              // #ifndef APP-PLUS || MP-WEIXIN
              this.$wanlshop.msg("目前只开放App和微信小程序直播");
              // #endif
              break;
            case "chat":
              this.toChat(id);
              break;
          }
        },
      });
      // #endif
      // #ifdef H5
      this.$wanlshop.msg("暂不支持H5扫码");
      // #endif
    },
    // 搜索
    handleSearch(text) {
      this.$wanlshop.to(
        `/pages/page/search?type=goods&keywords=${text}`,
        "fade-in",
        100
      );
    },
    //禁止父元素滑动 1.0.3升级
    moveHandle() {},
  },
};
</script>

<style lang="scss">
.wanlshop-container {
  &__head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-size: 100% auto;
    background-repeat: no-repeat;
    .navigater {
      height: 86rpx;
      padding-left: 25rpx;
      padding-right: 25rpx;
      /* #ifdef MP */
      padding-right: 200rpx;
      /* #endif */
      .search {
        flex: 1;
        background-color: #fff;
        height: 66rpx;
        border: 2rpx solid #fff;

        .icon {
          margin: 0 20rpx;
        }

        swiper {
          height: 100%;
          width: 100%;
          margin-right: 10rpx;
          swiper-item {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    // .toolbar {
    // 	.scroll {
    // 		flex: 1;
    // 		white-space: nowrap;
    // 		overflow: hidden;
    // 		width: 100%;
    // 		&__item {
    // 			position: relative;
    // 			z-index: 2;
    // 			font-size: 28rpx;
    // 			display: inline-flex;
    // 			height: 58rpx;
    // 			align-items: center;
    // 			margin-right: 40rpx;
    // 			&.action {
    // 				position: relative;
    // 				font-weight: bold;
    // 				font-size: 30rpx;
    // 				&::after {
    // 					content: ' ';
    // 					position: absolute;
    // 					bottom: 0;
    // 					left: 50%;
    // 					transform: translateX(-50%);
    // 					height: 4rpx;
    // 					width: 30rpx;
    // 					border-radius: 6rpx;
    // 					background-color: #fff;
    // 				}
    // 			}
    // 		}
    // 	}
    // 	.category {
    // 		box-shadow: #eee -16rpx 0 16rpx -16rpx;
    // 		height: 58rpx;
    // 		font-size: 28rpx;
    // 		padding-left: 25rpx;
    // 	}
    // }
  }
  &__main {
    position: relative;
    z-index: 99;
  }
  .WANL-MODAL {
    .cu-modal {
      &.top-modal {
        background: rgba(0, 0, 0, 0.6);
        text-align: inherit;
        .cu-dialog {
          background: #fff;
          border-radius: 0 0 18rpx 18rpx;
          .category {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            grid-auto-flow: row dense;
            grid-gap: 16rpx;
            .item {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 12rpx 0;
              border: 2rpx solid transparent;
              &.action {
                background-color: transparent;
                border-color: #f40;
                color: #f40;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
</style>
